<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/static/echarts-4.8.0/dist/echarts.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>

	<a onclick="location.reload()">刷新</a>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        option = {
                backgroundColor: '#fff',
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(72,179,255,0.6)',
                    position:function (point, params, dom, rect, size) {
                      // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
                      // 提示框位置
                      var x = 0; // x坐标位置
                      var y = 0; // y坐标位置
                     
                      // 当前鼠标位置
                      var pointX = point[0];
                      var pointY = point[1];
                     
                      // 外层div大小
                      // var viewWidth = size.viewSize[0];
                      // var viewHeight = size.viewSize[1];
                     
                      // 提示框大小
                      var boxWidth = size.contentSize[0];
                      var boxHeight = size.contentSize[1];
                     
                      // boxWidth > pointX 说明鼠标左边放不下提示框
                      if (boxWidth > pointX) {
                        x = 5;
                      } else { // 左边放的下
                        x = pointX - boxWidth;
                      }
                     
                      // boxHeight > pointY 说明鼠标上边放不下提示框
                      if (boxHeight > pointY) {
                        y = 5;
                      } else { // 上边放得下
                        y = pointY - boxHeight;
                      }
                     
                      return [x, y];
                    },
                    // formatter: function (params) {
                    //     params = params[0];
                    //     // var date = new Date(params.name);
                    //     return '审核数: ' + data;
                    // },
                    axisPointer: {
                        animation: false,
                        lineStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#48b3ff'
                                }, {
                                    offset: 0.5,
                                    color: '#48b3ff',
                                }, {
                                    offset: 1,
                                    color: '#48b3ff'
                                }],
                                global: false
                            }
                        },
                    }
                },
                grid: {
                    top: '20%',
                    left: '10%',
                    right: '10%',
                    bottom: '10%',
                },
                xAxis: {
                    show:false,  //不显示X轴坐标
                    type: 'category',
                    boundaryGap: false,
                    axisLine: { //坐标轴轴线相关设置。数学上的x轴
                        show: true,
                    },
                     data: ['1月份','2月份', '3月份', '4月份', '5月份', '6月份', '7月份', '8月份', '9月份', '10月份', '11月份', '12月份']
                },
                yAxis: {
                    type: 'value',
                    name: '单位（件）',
                    show:false,  //不显示Y轴坐标
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(131,101,101,0.2)',
                            type: 'dashed',
                        }
                    }
                },
                series: [{
                    name:'产出数量(件)',
                    type: 'line',
                    showSymbol: true,
                    symbol: 'circle',
                    symbolSize: 12,
                    smooth: 0.3,
                    hoverAnimation: false,
                    tooltip: {
                        show: true
                    },
                    data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
                    lineStyle: {
                        normal: {
                            color: '#48b3ff', // 线条颜色
                            
                        },
                    },
                     itemStyle : {
                        normal : {
                            color:'#fff',
                            borderColor:'#48b3ff',
                            borderWidth:2,
                        }
                    },
                    areaStyle: { //区域填充样式
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(65, 165, 245,1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(228, 244, 255,0)'
                                }
                            ], false),
                            shadowBlur: 0 
                        }
                    },
                }]
            };
            

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>